<template>
    <el-card class="el-card-d" shadow="always">
        <div class="infinite-list-wrapper" style="overflow:auto;">
            <el-timeline
                    infinite-scroll-disabled="disabled">
                <div v-if="allmessages.length>0">
                    <el-timeline-item v-for="(item,index) in allmessages" :key="index" :timestamp='item.createTime'
                                      placement="top">
                        <el-card class="el-card-m" style="height:160px">
                            <h4>{{item.username}}：</h4>
                            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.content}}</p><br><br><br>
                            <span style="float: right">{{ item.time  }}</span>
                        </el-card>
                    </el-timeline-item>
                </div>
                <div v-else>
                    <el-timeline-item placement="top">
                        <el-card class="el-card-m" style="height:120px">
                            <h4>大黄子：</h4>
                            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 说点什么吧😁</p>
                        </el-card>
                    </el-timeline-item>
                </div>
            </el-timeline>
        </div>
        <div class="el-card-messages">
            <el-input type="textarea" :rows="5" placeholder="输入留言" maxlength="200" v-model="content"></el-input>
            <el-button type="info" round class="submit-message" @click="submitMessage">留言</el-button>
        </div>
    </el-card>
</template>

<script>
    import request from "@/utils/request";

    export default {
        name: "Message",
        data() {
            return {
                content: '',
                allmessages: [],
                user: {},
                entity: {}
            };
        },
        methods: {
            submitMessage() {
                if (this.content == '' || this.content.replace(/(^\s*)|(\s*$)/g, "") == "") {
                    this.$message('写点啥提交也行呀😉');
                    return;
                }
                request.post("/message?content="+this.content).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: "感谢您的评论",
                            type: "success"
                        });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                    this.content = '';
                    this.loadMessage();
                })
            },
            loadMessage() {
                request.get("/message/foreign/").then(res => {
                    this.allmessages = res.data;
                    console.log("打印下allmessages：",this.allmessages)
                })
            },
        },
        created() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            this.loadMessage();
        },
    }
</script>
<style scoped>
    .infinite-list-wrapper{
        width: 100%;
        height: 500px;
    }
    .submit-message{
        width: 100%;
        background: rgb(235, 245, 247);
        color: cadetblue;
        letter-spacing:20px;
    }
    @media screen and (max-width: 3000px) and (min-width: 767px) {
        .el-card-d{
            float: left;
            margin-top: 20px;
            /*margin-left: 10%;*/
            width: 80%;
            height: 90%;
        }

    }
    /*
    屏幕小于768px的
    */
    @media screen and (max-width:768px) and (min-width: 100px){
        .el-card-d{
            width: 100%;
            height: 100%;
        }
    }

</style>
